<template>
  <div id="devicePosition">
    <el-container v-loading="loading" element-loading-text="拼命加载中">
      <el-aside width="280px" style="background-color: #ffffff; border: 1px solid #e5e5e5">
        <div class="page-header">
          <!-- <el-radio-group size="mini" @change="handleRadioChange" v-model="treeRadio">
            <el-radio-button label="监控"></el-radio-button>
            <el-radio-button v-if="$route.query.type === 'PB'" label="电脑"></el-radio-button>
          </el-radio-group> -->
          <div class="page-title">
            <span>人员列表</span>
            <el-input
              style="width: 180px; margin-left: auto"
              size="mini"
              placeholder="关键字"
              prefix-icon="el-icon-search"
              v-model="searchSrt"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="page-people">
          <ul>
            <li>
              <div>
                <el-avatar :size="50" :src="touxianglist[0]"></el-avatar>
              </div>
              <div>
                <p>姓名:张三</p>
                <p>类型:专家</p>
              </div>
            </li>
          </ul>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div style="display: flex; align-items: center">
            <div></div>
          </div>
          <div style="display: flex; align-items: center; margin-left: auto">
            <el-button size="mini"  @click="chooseButton(2)">返回</el-button>
            <el-button size="mini" @click="chooseButton(4)">视频监控</el-button>
          </div>
        </el-header>
        <el-main style="padding: 0; margin: 0 auto; background-color: #a9a8a8">
            <!-- <proViewComponent></proViewComponent> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import screenfull from "screenfull";
import { deviceGetPlayUrl } from "@/api/pageVideoWitness";
import { dvListPerson,dvListTrack,listPersonByTrack } from "@/api/pageViewBig";
// import proViewComponent from "./proViewComponent.vue"
export default {
  name: "live",
  props: [],
  components: {
    // proViewComponent
  },
  watch:{
    searchSrt(val) {
        // this.$refs.tree_dom.filter(val);
      }
  },

  data() {
    return {
      touxianglist: [
        require("@/assets/imgs/dp/专家.png"),
        require("@/assets/imgs/dp/专家2.png"),
        require("@/assets/imgs/dp/专家3.png")
      ],
      //channel
      loading: false,
      searchSrt:'',
      listMenu:[],
      activePerIndex:0 //当前选中的专家
    };
  },
  mounted() {},
  created() {
  //  this.getPeopleList()
  //  this.getDvListPerson()
  },
  destroyed() {},
  methods: {
    // 查询工作人员列表
    //   getPeopleList(){
    //    return new Promise((resolve,reject)=>{
    //      const { startTime, endTime } = this.form
    //   const params = {
    //      "personIds": [],
    //      "start":startTime,
    //      "end": endTime
    //   }
    //   listPersonByTrack(params).then(res => { 
    //     console.log('工作人员列表',res);
        
    //      if(res.code === 0){
    //         this.listMenu = res.data;
    //         resolve(res.data)
    //      }else{
    //         reject(res.msg)         
    //      }

    //   })
    //   })
    // },
    // 获取评标人员列表
    // getDvListPerson() {
    //   return new Promise((resolve, reject) => {
    //     const params = {
    //       projectId: this.form.projectId,
    //       bdId: this.form.bidId
    //     };
    //     dvListPerson(params).then((res) => {
    //       console.log('res评标人员',res);
    //       if (res.code === 0) {
    //         const colors = this.generateColors(res.data.length)
    //         const arrColor = Array.from(colors)
    //         console.log('arrColor',arrColor);
            
    //         this.arrColor = arrColor
    //         this.listMenu = res.data;
    //         res.data.forEach((el,index) => {
    //           el.color = arrColor[index]
    //           el.HexString = '#' + arrColor[index].getHexString()
    //         });
    //         // 找到当前选中的人
    //         if (this.form.personId) {
    //           const index = res.data.findIndex((x) => {
    //             return x.personId === this.form.personId[0];
    //           });
    //           this.activePerIndex = index;
    //         }
    //         resolve(res.data);
    //       } else {
    //         reject(res.msg);
    //       }
    //     });
    //   });
    // },
    chooseButton(num) {
      const { bdid, taskid } = this.$route.query;
      if (num == 2) {
        // 跳转到评标阶段
        this.$router.push({ path: "/witnessStage/pbStage", query: { bdid, taskid }});
      }
      if (num == 4) {
        this.$router.push({ path: "/witness/pageVideoWitness",query:{bdid, taskid,type:'PB' }});
      }
    },
    fullScreen: function () {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.playBox);
      }
    }
  }
};
</script>
<style scoped lang="scss">
#devicePosition {
  height: calc(100vh - 150px);
  // border: 1px solid red;
}
.page-people{
  li{
    padding: 10px;
    display: flex;
    border: 1px solid rgba(170, 170, 170, 0.95);
  }
 div:nth-child(2){
    margin-left: 10px;
  }
}
.page-title{
  display: flex;
  padding: 4px;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(170, 170, 170, 0.95);
  color: #333;
  // border: 1px solid #e5e5e5;
}
.el-header {
  display: flex;
}
.el-icon-full-screen {
  font-size: 28px;
  margin-left: 10px;
}
.el-main {
  width: 100%;
}
</style>
